<script setup lang="ts">
import { enablePlugin } from '~/logic/storage'

function toggleExtension() {
  enablePlugin.value = !enablePlugin.value
}
</script>

<template>
  <main class="w-[200px] px-4 py-2 text-center text-gray-700">
    <div>
      少费划
    </div>
    <!-- Toggle Switch -->
    <div class="flex items-center justify-center mt-2">
      <button
        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out"
        :class="enablePlugin ? 'bg-blue-600' : 'bg-gray-200'"
        role="switch"
        :aria-checked="enablePlugin"
        @click="toggleExtension"
      >
        <span class="sr-only">Enable extension</span>
        <span
          class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out"
          :class="enablePlugin ? 'translate-x-6' : 'translate-x-1'"
        />
      </button>
      <span class="ml-3 text-sm">
        {{ enablePlugin ? '启用' : '关闭' }}
      </span>
    </div>
  </main>
</template>
